<template>
  <div>

    <!--  顶部按钮  -->
    <Card style="width:100%" class="card">
<!--      <div class="head">-->
<!--        <Button type="info">添加</Button>-->
<!--        <Button type="error" @click="deleteClient">批量删除</Button>-->
<!--        <Input v-model="value" placeholder="Enter something..." style="width: 300px" />-->
<!--        <Button type="info" class="search">搜索</Button>-->
<!--      </div>-->
      <div>此数据需要开启json-server,表格为vxe-table</div>
      <!--     table数据表格-->
      <div class="table">
        <vxe-grid
            border
            resizable
            keep-source
            ref="xGrid"
            id="toolbar_demo_1"
            height="530"
            :loading="loading"
            :print-config="{}"
            :export-config="{}"
            :import-config="{}"
            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
            :pager-config="tablePage"
            :data="tableData"
            :columns="tableColumn"
            :toolbar-config="tableToolbar"
            :custom-config="{storage: true}"
            :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
            @toolbar-button-click="toolbarButtonClickEvent"
            @form-submit="findList"
            :form-config="tableForm"
            @page-change="handlePageChange"></vxe-grid>
      </div>
    </Card>
  </div>
</template>

<script>

import {getClientInformation,paginationClientInformation,deleteClientInformation,clientInformation} from "api/http";
import areaList from 'utils/aters.js';
let {province_list,city_list,county_list} = areaList
export default {
  name: "clientInformation",
  data(){
    return{
      loading:true,
      allAlign: "center",
      tableData: [],
      value:"",
      areaList:{
        province_list,
        city_list,
        county_list
      },
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      tableColumn: [
        { type: 'seq', width: 60 },
        { type: 'checkbox', width: 100 ,title: '全选' },
        { field: 'name', width: 100,title: '名字' },
        {  type: "image", field: 'profilePhoto2', title: '头像'},
        { field: 'email', title: '邮箱' },
        { field: 'phone', title: '电话' },
        { field: 'address', title: '地址' },
        { field: 'registrationTime', title: '注册时间'},
        // { field: 'registrationTime', title: 'registrationTime'}
      ],

      //搜索表单
      tableForm: {
        items: [
          { field: 'name', title: '名称', itemRender: { name: 'input', attrs: { placeholder: '请输入名称' } } },
          { field: 'sex', title: '性别', itemRender: { name: '$select', options: [] } },
          { itemRender: { name: '$button', props: { content: '查询', type: 'submit', status: 'primary' } } },
          { itemRender: { name: '$button', props: { content: '重置', type: 'reset' } } }
        ]
      },

      //按钮
      tableToolbar: {
        buttons: [
          { code: 'myInsert', name: '新增' },
          { code: 'mySave', name: '保存', status: 'success' },
          { code: 'myDelete', name: '删除', status: 'danger' ,click:'removeEvent'},
          // { code: 'myExport', name: '导出数据', type: 'text', status: 'warning' },
        ],
        refresh: true,
        import: true,
        export: true,
        print: true,
        zoom: true,
        custom: true
      },
    }
  },
  methods:{
    //第一页全部数据
    async findList () {
      this.loading = true
      let clientInformation =await getClientInformation()
      setTimeout(() => {
        this.loading = false
        this.tablePage.total = clientInformation.length
        this.tableData = clientInformation
      }, 300)
    },


    searchEvent () {
      this.tablePage.currentPage = 1
      this.findList()
    },

    //分页
    async handlePageChange ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loading = true
      let p = await paginationClientInformation(currentPage, pageSize)
      this.tableData = p
      this.loading = false
    },

    //插入 删除 保存
    toolbarButtonClickEvent ({ code }) {
      switch (code) {
        case 'myInsert':
          this.$refs.xGrid.insert({
            name: 'xxx'
          })
          break
        case 'mySave':
          setTimeout(() => {
            const { insertRecords, removeRecords, updateRecords } = this.$refs.xGrid.getRecordset()
            this.$XModal.message({ message: `新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`, status: 'success' })
            this.findList()
          }, 100)
          break
        case 'myExport':
          this.$refs.xGrid.exportData({
            type: 'csv'
          })
          break
        case  'myDelete':
          this.$XModal.confirm('您确定要删除选中数据吗?').then(type => {
            if (type === 'confirm') {
              this.$refs.xGrid.removeCheckboxRow()
            }
          })
          break
      }
    },

    // 下拉选项
    async findSexList () {
      // const sexList = await XEAjax.get('/api/conf/sex/list')
      // 异步更新下拉选项
      console.log("164",province_list);
      // this.tableForm.items[1].itemRender.options = province_list
    },

    //搜索
    async searchList () {
      this.loading = true
      let searchList = await clientInformation(this.tableForm.data)
      this.tableData = searchList
      this.loading = false
    },
  },
  created (){
    this.findList()
    this.findSexList()

  }
}
</script>

<style scoped lang="less">
.card{
  //margin:200px auto;
  Button{
    margin-right: 20px;
  }
  .search{
    margin-left: 10px;
  }
  .table{
    margin-top:20px;
  }
}
</style>